<script lang="ts" setup>
import {
  AlButton,
  AlCheckbox,
  AlIcon,
  AlInput,
  AlLoading,
  Hide,
  Lock,
  SuccessFilled,
  User,
  View,
} from '@zero-dim/component-adapter'

import { AlHttp, ResponseCodeEnum } from '@zero-dim/request'
import { onMounted, ref } from 'vue'

import loginBg from '@/assets/img/login-bg.png'
import { useUserStore } from '@/store/modules/user'

const bg = ''

const oauth2Config = {
  client_id: 'system',
  client_secret: 'system',
  response_type: 'code',
  redirect_uri: 'http://localhost:5173/oauth2',
  state: 1,
}

const loginForm = ref({
  username: 'admin',
  password: '!QAZ2wsx',
  rememberMe: true,
  client_id: oauth2Config.client_id,
  client_secret: oauth2Config.client_secret,
  grant_type: 'password',
  redirect_uri: oauth2Config.redirect_uri,
  captchaValue: '',
  captchaKey: '',
  mode: 'modal',
})

const verificationCode = ref({
  captchaKey: '',
  captchaOnOff: true,
  img: 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
})

const showPassword = ref(false)

const loginLoading = ref(false)

const userStore = useUserStore()

function changePasswordStatus() {
  showPassword.value = !showPassword.value
}

async function handleLogin() {
  loginLoading.value = true
  const code = await userStore.login({
    ...loginForm.value,
    captchaKey: verificationCode.value.captchaKey as string,
  })
  if (code !== ResponseCodeEnum.SUCCESS)
    await handleVerificationCode()
  loginLoading.value = false
}

async function handleVerificationCode() {
  const loading = AlLoading.service({
    customClass: 'al-verification-code',
    target: '.verification-code',
    background: 'rgba(255, 255, 255, 0.7)',
  })
  try {
    const { data } = await AlHttp.get('/captcha', {
      width: 100,
      height: 50,
    }, {
      isShowSuccessMessage: false,
      isShowErrorMessage: false,
    })
    verificationCode.value = data
  }
  finally {
    loading.close()
  }
}

onMounted(() => {
  handleVerificationCode()
})
</script>

<template>
  <div class="flex justify-center items-center h-full" :style="`background: #fff url(${bg})`">
    <div class="w-[900px] h-[480px] bg-basic-color rounded-md flex" style="box-shadow: 0 1px 14px 2px rgb(7 27 48 / 9%)">
      <img class="w-[420px] h-full bg-cover p-[20px]" :src="loginBg" alt="登录背景">
      <div class="p-[60px] flex-1">
        <div class="text-xl text-center">
          欢迎登录 Ai Lowcode
        </div>
        <div class="mt-[40px]">
          <AlInput v-model="loginForm.username" :prefix-icon="User" placeholder="请输入账户(admin)" />
          <AlInput v-model="loginForm.password" :prefix-icon="Lock" :type="showPassword ? 'text' : 'password'" class="mt-[20px]" placeholder="请输入密码(!QAZ2wsx)">
            <template #suffix>
              <AlIcon class="cursor-pointer" @click="changePasswordStatus">
                <View v-if="showPassword" />
                <Hide v-else />
              </AlIcon>
            </template>
          </AlInput>
          <AlInput v-model="loginForm.captchaValue" :prefix-icon="SuccessFilled" class="mt-[20px]" placeholder="请输入验证码">
            <template #suffix>
              <div class="verification-code h-[30px]">
                <img :src="`data:image/jpeg;base64,${verificationCode.img}`" alt="验证码" class="cursor-pointer h-full" @click="handleVerificationCode">
              </div>
            </template>
          </AlInput>
          <div class="flex justify-between items-center mt-[15px]">
            <AlCheckbox v-model="loginForm.rememberMe">
              记住密码
            </AlCheckbox>
            <div class="text-sm cursor-pointer text-active-color select-none">
              忘记密码
            </div>
          </div>
          <div class="mt-[20px]">
            <AlButton :loading="loginLoading" class="w-full" type="primary" @click="handleLogin">
              登录
            </AlButton>
          </div>
          <div class="mt-[15px]">
            <AlButton class="w-full" text>
              注册账户
            </AlButton>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.al-verification-code){
  .el-loading-spinner {
    margin-top: -10px;

    .circular {
      width: 20px;
      height: 20px;
    }
  }
}
</style>
